<template>
  <div>
    <CodeCard v-bind="btnDesc">
      <sdn-steps :active="active" finish-status="success">
        <sdn-step title="步骤 1"></sdn-step>
        <sdn-step title="步骤 2"></sdn-step>
        <sdn-step title="步骤 3"></sdn-step>
      </sdn-steps>
      <sdn-button style="margin-top: 12px;" @click="next">下一步</sdn-button>
      <template #annotation></template>
    </CodeCard>
  </div>
</template>

<script>


export default {
  components: {
    
  },
  data() {
    return {
      active: 0
    };
  },

  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    }
  },
  setup() {
    const btnDesc = {
      title: "Steps 步骤条",
      describe: "引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。",
      codeBlock: `<sdn-steps :active="active" finish-status="success">
        <sdn-step title="步骤 1"></sdn-step>
        <sdn-step title="步骤 2"></sdn-step>
        <sdn-step title="步骤 3"></sdn-step>
      </sdn-steps>`,
      attrs: [
        {
          "name": "space",
          "describe": "每个 step 的间距，不填写将自适应间距。支持百分比。",
          "type": "number / string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "direction",
          "describe": "显示方向",
          "type": "string",
          "emun": "vertical/horizontal",
          "default": "horizontal"
        }, {
          "name": "active",
          "describe": "设置当前激活步骤",
          "type": "number",
          "emun": "—",
          "default": "0"
        }, {
          "name": "process-status",
          "describe": "设置当前步骤的状态",
          "type": "string",
          "emun": "wait / process / finish / error / success",
          "default": "process"
        }, {
          "name": "finish-status",
          "describe": "设置结束步骤的状态",
          "type": "string",
          "emun": "wait / process / finish / error / success",
          "default": "finish"
        }, {
          "name": "align-center",
          "describe": "进行居中对齐",
          "type": "boolean",
          "emun": "-",
          "default": "FALSE"
        }, {"name": "simple", "describe": "是否应用简洁风格", "type": "boolean", "emun": "-", "default": "FALSE"}]
    };
    return {
      btnDesc,
    };
  },
};
</script>

<style scoped>
.demo {
  margin-bottom: 0.1rem;
  max-width: 50%;
}
</style>
